<template>
  <div class="content-wrap content-contanier" v-loading="loading">
    <div class="card-wrap-table-box">
      <!-- 顶部快速搜索区域 -->
      <div class="card-wrap-table-search">
        <el-button class="table-search-btn" :type="activeButton === 'status1' ? 'primary' : 'info'"
          @click="upAllRequirementsType1()">
          <span>负责研发任务未填写：</span>
          <span style="color: #cca409;">{{ statusCounts.status1 }}</span>
        </el-button>
        <el-button class="table-search-btn" :type="activeButton === 'status2' ? 'primary' : 'info'"
          @click="upAllRequirementsType2()">
          <span>负责运维任务未填写：</span>
          <span style="color: #cca409;">{{ statusCounts.status2 }}</span>
        </el-button>
        <el-button class="table-search-btn" :type="activeButton === 'status3' ? 'primary' : 'info'"
          @click="upAllRequirementsType3()">
          <span>负责测试任务未填写：</span>
          <span style="color: #cca409;">{{ statusCounts.status3 }}</span>
        </el-button>
        <el-button class="table-search-btn" :type="activeButton === 'status4' ? 'primary' : 'info'"
          @click="upAllRequirementsType4()">
          <span>未上传巡检文档：</span>
          <span style="color: #cca409;">{{ statusCounts.status4 }}</span>
        </el-button>
      </div>

      <!-- 搜索结果区域 -->
      <div class="card-table-box">
        <el-table :data="allbearUsers" border>
          <el-table-column fixed type="index" label="序号" width="60" align="center"></el-table-column>
          <el-table-column label="需求名称" prop="ItemRequirementName" min-width="300" show-overflow-tooltip>
            <template #="{ row }">
              <p class="table-requirement-name" @click="handleRowClick(row.ItemRequirementId)">{{
                row.ItemRequirementName }}</p>
            </template>
          </el-table-column>
          <el-table-column label="技术负责人" prop="bearBossUserName" width="100" align="center">
            <template #="{ row }">
              <span>{{ row.bearBossUserName }}</span>
            </template>
          </el-table-column>
          <el-table-column label="项目经理" prop="itemRequirementManagerName" width="100" align="center">
            <template #="{ row }">
              <span>{{ row.itemRequirementManagerName }}</span>
            </template>
          </el-table-column>
          <el-table-column label="任务类型" prop="bearType" width="100" align="center">
            <template #="{ row }">
              <span>{{ bearStatus(row.bearType)?.text }}任务</span>
            </template>
          </el-table-column>
          <el-table-column label="需求状态" prop="requirementOnlineStatus" width="100" align="center">
            <template #="{ row }">
              <!-- <span v-if="row.requirementOnlineStatus == 1" style="color: #e6a23c"> 待上线 </span>
              <span v-if="row.requirementOnlineStatus == 2" style="color: green;"> 上线成功 </span>
              <span v-if="row.requirementOnlineStatus == 3" style="color: red;"> 上线失败 </span> -->
              <span :style="{ color: requirementOnlineStatus(row.requirementOnlineStatus).color }">{{
                requirementOnlineStatus(row.requirementOnlineStatus).content }}</span>
            </template>
          </el-table-column>
          <el-table-column label="操作" width="200" align="center">
            <template #default="{ row }">
              <!-- 操作 -->
              <div class="operate-box">
                <el-button v-if="row.bearContent == '' && row.requirementOnlineStatus == 1" style="width: 100%;"
                  type="primary" @click="handlewirteClick(row.ID)">填写上线负责内容</el-button>
              </div>
              <div class="operate-box">
                <el-button v-if="row.bearContent != '' && row.requirementOnlineStatus == 1" disabled
                  style="width: 100%;" type="warning">等待上线</el-button>
              </div>
              <div class="operate-box">
                <el-button v-if="row.bearContent != '' && row.requirementOnlineStatus == 2 && row.mSFilePath == ''"
                  style="width: 100%;" type="success" @click="handleDesignClick(row.ID)">上线成功-上传巡检文档</el-button>
              </div>
              <div class="operate-box">
                <el-button v-if="row.bearContent != '' && row.requirementOnlineStatus == 3 && row.mSFilePath == ''"
                  style="width: 100%;" type="danger" @click="handleDesignClick(row.ID)">上线失败-上传巡检文档</el-button>
              </div>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>


    <!-- 上传巡检文档 -->
    <el-dialog class="dialog-container" style="
        min-height: 400px;
        display: flex;
        justify-content: space-between;
        flex-direction: column;" :close-on-click-modal="false" v-model="dialogDesignFileVisible" title="上传巡检文档"
      @close="handleCloseDialog" @closed="handleCloseDialog">
      <el-upload class="upload-demo" drag action="" multiple="true" :limit="3" v-model:file-list="designFileText"
        :http-request="handleUpLoad" :on-error="handleError" :on-remove="handleRemove" :on-exceed="handleExceed">
        <el-icon class="el-icon--upload"><upload-filled /></el-icon>
        <div class="el-upload__text">
          拖拽文件或者 <em>点击上传文件</em>
        </div>
      </el-upload>

      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary" @click="handleCloseDialog">取消</el-button>
          <el-button type="primary" @click="handleDesignFile()">提交</el-button>
        </div>
      </template>
    </el-dialog>

    <!-- 上线评审会议纪要 -->
    <el-dialog v-model="dialogWriteOnlineVisible" :close-on-click-modal="false" title="上线负责内容" width="1000"
      style="margin-top: 180px;" @close="handleColseWriteOnlineDialog" @closed="handleColseWriteOnlineDialog">
      <el-form label-position="right" label-width="160px" v-model="onlineForm">
        <el-input v-model="onlineForm.bearContent" style="width: 900px;margin-bottom: 20px;margin-right: 20px;"
          :rows="12" type="textarea" placeholder="请输入上线负责内容">
        </el-input>
        <el-form-item>
          <!-- <template #footer> -->
          <div class="dialog-footer" style="width: 100%;margin-right: 8%; display: flex;justify-content: right;">
            <el-button type="primary" @click="dingdingWriteOnlineMsgClick()"> 提交 </el-button>
          </div>
          <!-- </template> -->
        </el-form-item>
      </el-form>
    </el-dialog>

    <!-- 需求详情弹窗 -->
    <el-dialog v-if="dialogInfoVisible" style="width: 1200px;" :close-on-click-modal="false" v-model="dialogInfoVisible"
      @close="handleCloseRowDialog" @closed="handleCloseRowDialog" top="8vh">
      <CommonRequirementInfoVue v-if="dialogInfoVisible" :isRequirementID="isRequirementID" :clearData="clearData"
        :isComment="true"></CommonRequirementInfoVue>
    </el-dialog>
  </div>
</template>

<script setup lang='ts'>
import { ref, onMounted, reactive } from 'vue';
import { ElMessage, ElMessageBox, ElNotification, FormInstance, } from "element-plus";
import { tableTimeDateMsgTow, requirementOnlineStatus, bearStatus } from "@/utils/utils";
import { useRouter } from "vue-router";
import { postUploadFile } from "@/api/common/index";
import CommonRequirementInfoVue from "@/components/requirement/comomRequirementInfo.vue";
import {
  GetMyBareMsg, //获取所有的待填写任务列表
  SubmitBearContent,//提交上线负责内容
  PutSaveMsOnlineEndBearContents,//上传巡检文档
} from "@/api/newDemands/index";
/* 参数 */
let router = useRouter();
const loading = ref(false);

const dialogInfoVisible = ref(false);//查看需求弹窗控件
const clearData = ref(false);//控制是否清空子组件数据
const isRequirementID = ref<any>(null);//当前需求id
const dialogWriteOnlineVisible = ref(false); //上线评审会议纪要模态框
const dialogDesignFileVisible = ref(false);//控制上传巡检文档控件
const designFilePath = ref("");//巡检文档文件地址
const designFileText = ref([]);//巡检文档文件显示
const allbearUsers = ref<any>([]); // 获取要填写负责内容的上线任务
const allbearUsersCopy = ref<any>([]); // 获取要填写负责内容的上线任务
const allType1BearUsers = ref<any>([]);//研发上线任务
const allType2BearUsers = ref<any>([]);//运维上线任务
const allType3BearUsers = ref<any>([]);//测试上线任务
const allType4BearUsers = ref<any>([]);//运维上线任务
const activeButton = ref(''); // 默认激活第一个按钮
const onlineForm = ref<any>({
  requirementBearId: null,
  bearContent: null,
  requirementOnlineStatus: null,
}); // 要填写负责内容的上线任务

const statusCounts = reactive({
  status1: 0,
  status2: 0,
  status3: 0,
  status4: 0,
});
const onlineDesignForm = ref<any>({
  requirementBearId: null,
  mSFilePath: null,
}); // 上传巡检文档


//  自定义上传文件
const handleUpLoad = async (options: any) => {
  const { data } = await postUploadFile(options.file, "xunjianWorld", "2");
  if (data.code === 200) {
    // 文件地址
    // onlineDesignForm.value.mSFilePath = data.data.resultFilePath;
    designFilePath.value = data.data.resultFilePath;
  } else {
    ElMessage.error(data.msg);
    throw console.error(data.msg);
  }
};

const handleError = (err: any) => {
  ElMessage.error(err);
};

const handleRemove = (file: any) => {
  designFileText.value = [];
  designFilePath.value = "";
};

const handleExceed = (exc: any) => {
  ElMessage.warning("只能上传3个文件！")
};

// 弹出编写上线内容输入框
const handlewirteClick = (id: number) => {
  onlineForm.value.requirementBearId = id;
  dialogWriteOnlineVisible.value = true;
}

// 弹出上传巡检文档弹窗
const handleDesignClick = (id: number) => {
  dialogDesignFileVisible.value = true;
  onlineDesignForm.value.requirementBearId = id;
}


// 上传巡检文档后将文件与需求绑定
const handleDesignFile = async () => {
  dialogDesignFileVisible.value = true;
  onlineDesignForm.value.mSFilePath = designFilePath.value;
  // 此处上传巡检文档
  const { data } = await PutSaveMsOnlineEndBearContents(onlineDesignForm.value)
  if (data.code === 200 && data.data !== null) {
    ElMessage.success(data.msg);
    dialogDesignFileVisible.value = false;
    await getAllMyBears();
    loading.value = false;
    return;
  } else {
    ElMessage.error(data.msg);
    loading.value = false;
    return;
  }
};

// 提交上线负责内容
const dingdingWriteOnlineMsgClick = async () => {
  loading.value = true;
  const { data } = await SubmitBearContent(onlineForm.value)
  if (data.code === 200 && data.data !== null) {
    ElMessage.success(data.msg);
    loading.value = false;
    dialogWriteOnlineVisible.value = false;
    getAllMyBears();
    return;
  } else {
    ElMessage.error(data.msg);
    loading.value = false;
    return;
  }
}


// 关闭上传弹框
const handleCloseDialog = () => {
  onlineDesignForm.value = {
    requirementBearId: null,
    mSFilePath: null,
  };
  designFileText.value = [];
  designFilePath.value = "";
  dialogDesignFileVisible.value = false;
};

const handleColseWriteOnlineDialog = () => {
  loading.value = false
  dialogWriteOnlineVisible.value = false;
};


// TODO 获取所有我的上线列表
const getAllMyBears = async () => {
  loading.value = true;
  const { data } = await GetMyBareMsg();

  if (data.code === 200 && data.data !== null) {
    allType1BearUsers.value = data.data.type1.filter((item: any) => item.bearContent == '');
    allType2BearUsers.value = data.data.type2.filter((item: any) => item.bearContent == '' && item.requirementOnlineStatus == 1);
    allType3BearUsers.value = data.data.type3.filter((item: any) => item.bearContent == '');
    allType4BearUsers.value = data.data.type2.filter((item: any) => item.mSFilePath == '' && item.requirementOnlineStatus != 1 && item.bearContent != '');

    statusCounts.status1 = data.data.type1.filter((item: any) => item.bearContent == '').length;
    statusCounts.status2 = data.data.type2.filter((item: any) => item.bearContent == '' && item.requirementOnlineStatus == 1).length;
    statusCounts.status3 = data.data.type3.filter((item: any) => item.bearContent == '').length;
    statusCounts.status4 = data.data.type2.filter((item: any) => item.mSFilePath == '' && item.requirementOnlineStatus != 1 && item.bearContent != '').length;

    allbearUsers.value = [...allType1BearUsers.value, ...allType2BearUsers.value, ...allType3BearUsers.value, ...allType4BearUsers.value];
    allbearUsersCopy.value = [...allType1BearUsers.value, ...allType2BearUsers.value, ...allType3BearUsers.value, ...allType4BearUsers.value];
    ElMessage.success(data.msg);
    loading.value = false;
    return;
  } else {
    ElMessage.error(data.msg);
    loading.value = false;
    return;
  }
};


// 按钮状态变更
const upAllRequirementsType1 = async () => {
  allbearUsers.value = allType1BearUsers.value
  activeButton.value = 'status1';
}
const upAllRequirementsType2 = async () => {
  allbearUsers.value = allType2BearUsers.value
  activeButton.value = 'status2';
}
const upAllRequirementsType3 = async () => {
  allbearUsers.value = allType3BearUsers.value
  activeButton.value = 'status3';
}
const upAllRequirementsType4 = async () => {
  allbearUsers.value = allType4BearUsers.value
  activeButton.value = 'status4';
}



// TODO  查看需求
const handleRowClick = async (id: number) => {
  dialogInfoVisible.value = true;
  isRequirementID.value = id;
};

// 关闭查看需求弹窗
const handleCloseRowDialog = () => {
  dialogInfoVisible.value = false;
  clearData.value = true;
};



// 页面初始化调用接口
onMounted(async () => {
  getAllMyBears()
});

</script>

<style lang="scss" scoped>
.content-contanier {
  width: 100%;
  height: 100%;
  position: relative;

  .card-wrap-table-box {
    width: 100%;
    height: 100%;
    padding: 10px;

    // 顶部快速搜索区域
    .card-wrap-table-search {
      width: 100%;
      display: flex;
      justify-content: flex-start;
      margin-bottom: 10px;

      .table-search-btn {}
    }
  }
}

// // 需求列表区域
// .card-layout-box {
//   width: 100%;
//   height: 100%;
//   position: relative;
//   display: flex;
//   flex-direction: row;
//   flex-wrap: wrap;
//   // justify-content: flex-start;
//   justify-content: space-between;

//   // 无数据时显示
//   .card-not-requirement {
//     color: #909399;
//     margin: auto;
//   }

//   .card-box {
//     width: 33%;
//     // width: 470px;
//     height: 100%;
//     // height: 360px;
//     border: 1px solid #004ce4;
//     border-radius: 10px 10px 10px 10px;
//     // margin: 0 5px;
//     margin-bottom: 10px;
//     display: flex;
//     flex-direction: column;

//     // margin: 0 10px 20px 0;
//     // 列表标题
//     .card-header-box {
//       width: 100%;
//       height: 40px;
//       padding: 0 10px;
//       line-height: 40px;
//       font-size: 18px;
//       font-family: Helvetica, Arial, sans-serif;
//       color: white;
//       border-radius: 10px 10px 0 0;
//       display: flex;
//       flex-direction: row;
//       justify-content: space-between;
//       align-items: center;
//     }

//     // 暂无数据
//     .card-list-no {
//       width: 100%;
//       text-align: center;
//       margin: auto;
//     }

//     // 列表盒子
//     .card-list-box {
//       width: 100%;
//       height: calc(100% - 40px);
//       display: flex;
//       justify-content: start;
//       overflow-y: auto;

//       .card-list {
//         width: 100%;
//         height: 100%;
//         font-size: 14px;
//         overflow-y: auto;

//         .card-list-item {
//           width: 100%;
//           display: flex;
//           flex-direction: column;
//           border-bottom: 1px solid #ccc;
//           cursor: pointer;
//           padding: 5px 5px;
//           overflow: hidden;
//           position: relative;

//           // 附加信息样式
//           .card-list-small {
//             width: 100%;
//             display: flex;
//             justify-content: space-between;
//             flex-direction: row;
//             white-space: nowrap;
//             padding: 0;
//             font-size: 0.7rem;

//             .card-small {
//               width: 455px;
//               display: flex;
//               justify-content: space-between;
//               flex-direction: row;
//             }

//             .card-list-small-item {
//               margin: 0 10px 0 0;
//             }

//             .item-status {
//               width: 120px;
//             }

//             .boss-name {
//               width: 110px;
//             }

//             .test-list {
//               width: 180px;
//               overflow: hidden;
//               text-overflow: ellipsis;
//             }

//             .begin-time {
//               width: 110px;
//             }

//             .operate-box {
//               width: 180px;
//               text-align: right;
//             }
//           }

//           // 操作按钮样式
//           .card-list-operate {
//             justify-content: flex-end;
//             width: 60px;
//             position: absolute;
//             right: 10px;
//             top: 2px;
//             opacity: 1;
//             z-index: 999;

//             .el-col {
//               margin: 1px 0;
//               text-align: right;
//             }
//           }
//         }

//         .card-list-item:hover {
//           background-color: rgb(216.8, 235.6, 255);
//         }

//         .card-header-title {
//           width: 100%;
//           overflow: hidden;
//           text-overflow: ellipsis;
//           white-space: nowrap;
//         }

//         .card-header-title:hover {
//           color: #409EFF;
//           cursor: pointer;
//         }
//       }
//     }
//   }
// }

// ;

// // 审核需求
// .record-title {
//   display: flex;
//   flex-direction: row;
//   padding: 5px 10px;
//   margin-bottom: 10px;
//   background-color: #f0f0f0;
//   border-radius: 2px;

//   p {
//     margin-right: 20px;
//   }
// }

// // 需求草稿
// .info-file-box {
//   width: 100%;
//   display: flex;
//   justify-content: space-between;
//   flex-direction: row;
//   margin: 10px 0 0;

//   .info-content-title {
//     width: 100px;
//     padding: 0 10px;
//   }

//   .info-file-ul {
//     width: calc(100% - 70px);
//     text-align: left;
//     display: flex;
//     flex-direction: row;

//     .info-file-item {
//       width: 100px;
//       margin-right: 10px;
//       color: blue;
//     }

//     .info-file-item:hover {
//       color: #409EFF;
//       cursor: pointer;
//     }
//   }
// }

// // TODO 分配需求弹窗
// .dialog-container {
//   display: flex;
//   flex-direction: column;
//   justify-content: space-between;

//   .dialog-form-box {
//     width: 100%;
//     display: flex;
//     flex-direction: row;
//     justify-content: center;
//     margin-bottom: 30px;

//     .el-form-item {
//       margin: 0 10px;
//     }
//   }

//   .dialog-footer {
//     text-align: right;
//   }
// }

// // 修改需求弹窗
// .again-dialog {
//   .create-form {
//     width: 100%;
//     overflow-y: auto;
//     display: flex;
//     flex-direction: row;
//     flex-wrap: wrap;

//     .add-icon {
//       color: #dcdfe6;
//       cursor: pointer;
//       margin-left: 5px;
//     }

//     .add-icon:hover {
//       color: #409eff;
//     }

//     .is-check-role {
//       background-color: #409eff;
//     }

//     .file-box {
//       width: 100%;
//     }

//     .upload-box {
//       width: 100%;
//       // height: 60px;
//       // .el-form-item__content {
//       //   align-content: flex-start;
//       //   background-color: red;
//       // }
//     }
//   }

//   .create-form>*:not(.create-button) {
//     order: 1;
//   }

//   .create-button {
//     order: 2;
//     margin-left: auto;
//     margin-right: 20px;
//     margin-top: 20px;
//   }
// }</style>
